<template>
  <div>
    <Filters block :form="searchForm" :filterData="filterData" @confirm="changePage(1)"/>
    <div class="container">
      <DataTable
        rowKey="checkDetailId"
        :tableData="Data"
        :btns="btns"
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        @refresh="getList"
      >
      </DataTable>
    </div>
    <CommonDialog :rows="rows" :form="form" :title="dialogType === 'add' ? '新增配置' : '编辑配置'" :visible="formVisible" @hideDialog="hideFormVisible" @confirm="confirmHandle()"/>
  </div>
</template>
<script lang='ts'>
import { ANALYSIS_EXPORTANALYSIS } from '@/api/global'
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class acceptanceConfig extends Vue {
  formVisible: boolean = false;
  dialogType: string = 'add';
  projectList:any = [];
  projectMember:any = [];
  form: any = {
    projectId: undefined,
    trackScaleId: ''
  };
  currentPage:any = 1
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  searchForm: any = {
    name: '',
    trackScaleId: undefined
  }
  get filterData () {
    return {
        name: {
            label: '项目名称/人员名称',
            type: 'input',
            template: {
            placeholder: '请输入项目名称/人员名称',
            clearable: true
            }
        },
        trackScaleId: {
            label: '电子磅单ID',
            type: 'input',
            width: 200,
            template: {
            placeholder: '请输入电子磅单ID',
            clearable: true,
            filterable: true
            // options: this.projectList,
            // callback: this.callbackProject,
            // popupScroll: this.popupScroll,
            // search: this.searchProject
            }
        }

    }
  }
  get rows () {
    return {
      trackScaleId: {
        label: '磅单ID',
        placeholder: '请输入8位字符电子磅单ID',
        type: 'input',
        maxlength: 8,
        showDisabled: true,
        rules: [{ required: true, message: '请输入8位字符电子磅单ID', trigger: 'blur' }]
      },
      projectId: {
        label: '项目',
        el: 'select',
        placeholder: '请选择项目',
        mode: 'multiple',
        options: this.projectList,
        callback: this.handSelectProject,
        rules: [{ required: true, message: '请选择项目', trigger: 'blur' }]
      }

    }
  }
  btns: any[] = [
    {
      label: '新增',
      icon: 'add',
      callback: this.showModel
    }
  ];
  Data: any[] = []
  tableColumn: any = {
    index: {
      label: '序号',
      width: 120
    },
    trackScaleId: {
      label: '电子磅单ID',
      width: 120
    },
    projectName: {
      label: '关联项目',
      width: 100
    },
    createBy: {
      label: '操作人',
      width: 100
    },
    createTime: {
      label: '创建时间',
      width: 100
    },
    enableStatus: {
        label: '启动状态',
        width: 100,
        type: 'switch',
        callback: this.changeStatus
    },
    action: {
          label: '操作',
          width: 120,
          template: [
            {
            tag: 'a',
            text: '编辑',
            callback: this.edCheck
          },
          {
            tag: 'a',
            text: '删除',
            callback: this.deleteCheck
          }
        ]
    }
  }
  showModel () {
      this.formVisible = true;
      this.form.trackScaleId = 'DB' + this.MathRand()
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  hideFormVisible () {
    this.formVisible = false;
    this.form = {
        projectId: undefined,
        trackScaleId: ''
    };
  }
  searchProject (val:any) {
    this.shearchVal = val
    this.currentPage = 1
    this.projectList = []
    this.getProjectList()
  }
  callbackProject (val:any) {
    this.shearchVal = val
    this.currentPage = 1
    this.projectList = []
    this.getProjectList()
  }
  MathRand () {
    var str = '';
    for (var i = 0; i < 8; i++) {
      str += Math.floor(Math.random() * 10);
    }
    return str
  }
  // 点击编辑
  edCheck (val:any) {
    console.log(val)
    this.formVisible = true;
    this.dialogType = 'ed'
    this.form.trackScaleId = val.trackScaleId
    this.form.projectId = val.projectId.split(',')
  }
  confirmHandle () {
      this.form.projectId = this.form.projectId.join(',');
      this.$api.checkSettingAddOrUpdateScaleSettingFetch(this.form).then((res:any) => {
          if (res.code == 0) {
              this.$message.success('操作成功');
              this.formVisible = false;
              this.hideFormVisible()
              this.getList()
          }
      }).catch()
  }
  showEditDialog (val:any) {
      this.formVisible = true;
  }
  // 改变状态
  changeStatus (val:any) {
      let params = {
        projectId: val.projectId,
        trackScaleId: val.trackScaleId
      }
      this.$api.checkSettingTrackScaleSettingOffOnFetch(params).then((res:any) => {
          this.$message.success('操作成功')
          this.getList()
      }).catch()
  }
  // 删除
  deleteCheck (val:any) {
      console.log(val)
    let params = {
        projectId: val.projectId,
        trackScaleId: val.trackScaleId
    }
    this.$confirm({
      title: '提示',
      content: '是否确定删除？',
      onOk: () => {
        this.$api.checkSettingTrackScaleSettingDeleteFetch(params).then((res) => {
          this.$message.success('删除成功')
          this.getList()
        }).catch()
      },
      onCancel: () => {}
    })
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
      if (Math.floor(scrollHeight - scrollTop) === clientHeight) {
        this.currentPage++
        this.getProjectList()
      }
  }
  // 获取项目列表
  getProjectList () {
    let data = {
      page: this.currentPage,
      size: 100,
      searchValue: this.shearchVal
    }
      this.$api.projectRoleProjectListFetch(data).then((res:any) => {
          res.data.records.map((item:any) => {
            item.label = item.ncProjectName
            item.value = item.ncProjectId
          })
          let projectList = this.projectList.concat(res.data.records)
          this.projectList = projectList
      }).catch()
  }
  handSelectProject (val:any) {
      this.form.projectId = val
  }

  // 获取列表数据
  getList () {
      let data = {
          page: this.pageConfig.current,
          size: this.pageConfig.pageSize,
          name: this.searchForm.name,
          trackScaleId: this.searchForm.trackScaleId
      }
      this.$api.checkSettingTrackScaleSettingListFetch(data).then((res:any) => {
          if (res.code == 0) {
              res.data.records.map((item:any, index:any) => {
                  item.index = this.pageConfig.pageSize * (this.pageConfig.current - 1) + (index + 1)
                  if (item.enableStatus == 1) {
                    item.enableStatus = true
                  } else {
                    item.enableStatus = false
                  }
              })
              this.pageConfig.total = res.data.total
              this.Data = res.data.records
          }
      }).catch()
  }
  init () {
      this.getList()
      this.getProjectList()
  }
}
</script>
<style lang='scss' scoped>
.red {
  color: red
}
</style>
